Dev Depot: Kraken, Boilerplate Mobile Magic

According to its developer, Chris Ferdinandi, Kraken (cferdinandi.github.io/kraken/) is a lightweight, mobile-first boilerplate for front-end website developers seeking to satisfy today’s audiences on the go. “Frameworks are awesome, but they often include a lot of stuff — way more than you might use on a typical project,” Ferdinandi explains. “Boilerplates provide a great starting point, but they’re often missing things you need.”

Ferdinandi says that Kraken is a bit of a hybrid, consisting of a coding boilerplate with a collection of modular add-ons that allow developers to expand its functionality as needed. He added that since Kraken is style-agnostic, it is intentionally a bit ugly out-of-the-box, when using its default style settings.

This coding is a straightforward rendition that will be instantly familiar to many webmasters who are versed in CSS, and one that underscores Kraken’s simplicity and ease of use.

“Kraken isn’t supposed to be a finished product, it’s a starting point that you can adapt to any project you’re working on,” Ferdinandi notes. “Change the fontstack. Tweak the colors. Add gradients and transitions. Make Kraken your own.”

Kraken takes an Object Oriented CSS (OOCSS) approach to web development that allows CSS classes to be mixed, matched and reused throughout a project. A CSS reset ensures cross-browser compatibility, while the responsive mobile-first 6-column grid and well-designed fluid typography combine with basic styling for common elements and optional add-ons for added functionality to deliver a comprehensive coding solution.

Kraken uses a fully fluid, single-column layout as the base structure, using the CSS media query @media (min-width: whatever) to add a grid-based layout on top of the base structure. Alternatively, Kraken also offers a desktop-first approach that starts with a wide screen compatible grid based layout, which uses a different CSS media query, @media (max-width: whatever), to scale the design down to a mobile-friendly single-column layout.

“Throughout the style sheet, you will see base styles and modifying styles,” Ferdinandi stated. “For example, .btn sets the default button styles and behavior, while .btn-blue changes the color and .btn-large changes the size.” In this example, the HTML and CSS coding for a big, blue button would look like this:

<button class=?btn btn-blue btn-large?>Big Blue Button</button>

This coding is a straightforward rendition that will be instantly familiar to many webmasters who are versed in CSS, and one that underscores Kraken’s simplicity and ease of use.

According to the publisher, Kraken’s default template set uses the language attribute to help screen-readers and translation software read your site, along with Chrome Frame support and an IE force mode that requires the browser to use the latest available version of its rendering engine, or Chrome Frame if it is installed. Support for mobile screen resizing and the HTML5 Shim is included as well.

“Modern mobile browsers often ‘fake’ a desktop sized viewport so that websites that aren’t mobile-optimized aren’t weirdly zoomed in when you load them,” Ferdinandi explains. “The viewport tag tells browsers that the viewport should be the size of the screen (because our site is mobile-optimized).”

These techniques boost Kraken’s cross browser compatibility.

“Internet Explorer 8 and lower do not recognize the new HTML5 semantic elements (like <header>, <section>, and so on),” Ferdinandi added. “The HTML5 Shim is a little JavaScript snippet that we load conditionally on older IE browsers to ensure those elements render correctly.”

Kraken also displays a warning for website visitors using older browsers, urging them to upgrade; and offers support for favicons and touch icons on the home screen of mobile devices.

Kraken includes necessary JavaScript files in a web page’s footer, rather than the header, for faster loading and better performance. Also included is an optimized version of Google Analytics code, based on the HTML5 Boilerplate, requiring the simple addition of the site’s ID in order to obtain superior stats.

This code may be replaced altogether if using a different analytics platform. WordPress fans will be pleased to learn that Kraken has them covered with a compatible version, and there is a version for Rails installations as well.

Given its quality documentation and ease of deployment, Kraken may be a good candidate for your next adult website. Try it and see for yourself.

Related:  

Copyright © 2025 Adnet Media. All Rights Reserved. XBIZ is a trademark of Adnet Media.
Reproduction in whole or in part in any form or medium without express written permission is prohibited.

More Articles

opinion

WIA Profile: Lainie Speiser

With her fiery red hair and a laugh that practically hugs you, Lainie Speiser is impossible to miss. Having repped some of adult’s biggest stars during her 30-plus years in the business, the veteran publicist is also a treasure trove of tales dating back to the days when print was king and social media not even a glimmer in the industry’s eye.

Women in Adult ·
opinion

Fighting Back Against AI-Fueled Fake Takedown Notices

The digital landscape is increasingly being shaped by artificial intelligence, and while AI offers immense potential, it’s also being weaponized. One disturbing trend that directly impacts adult businesses is AI-powered “DMCA takedown services” generating a flood of fraudulent Digital Millennium Copyright Act (DMCA) notices.

Corey D. Silverstein ·
opinion

Building Seamless Checkout Flows for High-Risk Merchants

For high-risk merchants such as adult businesses, crypto payments are no longer just a backup plan — they’re fast becoming a first choice. More and more businesses are embracing Bitcoin and other digital currencies for consumer transactions.

Jonathan Corona ·
opinion

What the New SCOTUS Ruling Means for AV Laws and Free Speech

On June 27, 2025, the United States Supreme Court handed down its landmark decision in Free Speech Coalition v. Paxton, upholding Texas’ age verification law in the face of a constitutional challenge and setting a new precedent that bolsters similar laws around the country.

Lawrence G. Walters ·
opinion

What You Need to Know Before Relocating Your Adult Business Abroad

Over the last several months, a noticeable trend has emerged: several of our U.S.-based merchants have decided to “pick up shop” and relocate to European countries. On the surface, this sounds idyllic. I imagine some of my favorite clients sipping coffee or wine at sidewalk cafés, embracing a slower pace of life.

Cathy Beardsley ·
profile

WIA Profile: Salima

When Salima first entered the adult space in her mid-20s, becoming a power player wasn’t even on her radar. She was simply looking to learn. Over the years, however, her instinct for strategy, trust in her teams and commitment to creator-first innovation led her from the trade show floor to the executive suite.

Women in Adult ·
opinion

How the Interstate Obscenity Definition Act Could Impact Adult Businesses

Congress is considering a bill that would change the well-settled definition of obscenity and create extensive new risks for the adult industry. The Interstate Obscenity Definition Act, introduced by Sen. Mike Lee, makes a mockery of the First Amendment and should be roundly rejected.

Lawrence G. Walters ·
opinion

What US Sites Need to Know About UK's Online Safety Act

In a high-risk space like the adult industry, overlooking or ignoring ever-changing rules and regulations can cost you dearly. In the United Kingdom, significant change has now arrived in the form of the Online Safety Act — and failure to comply with its requirements could cost merchants millions of dollars in fines.

Cathy Beardsley ·
opinion

Understanding the MATCH List and How to Avoid Getting Blacklisted

Business is booming, sales are steady and your customer base is growing. Everything seems to be running smoothly — until suddenly, Stripe pulls the plug. With one cold, automated email, your payment processing is shut down. No warning, no explanation.

Jonathan Corona ·
profile

WIA Profile: Leah Koons

If you’ve been to an industry event lately, odds are you’ve heard Leah Koons even before you’ve seen her. As Fansly’s director of marketing, Koons helps steer one of the fastest-growing creator platforms on the web.

Women in Adult ·
Show More